<%@ include file="../common/header.jsp" %>
<!-- Main Content -->
<div class="content">
    <%@ include file="../common/top_nav.jsp" %>

    <div class="container mt-4">
        <h2>住户信息管理</h2>

        <!-- 新增按钮 -->
        <button class="btn btn-primary mb-3" data-bs-toggle="modal" data-bs-target="#residentModal"
                onclick="prepareAddResident()">新增住户
        </button>

        <!-- 住户信息列表 -->
        <table class="table table-bordered">
            <thead>
            <tr>
                <th>住户姓名</th>
                <th>性别</th>
                <th>联系电话</th>
                <th>邮箱</th>
                <th>入住日期</th>
                <th>退房日期</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach var="resident" items="${list}">
                <tr>
                    <td>${resident.name}</td>
                    <td>${resident.gender}</td>
                    <td>${resident.phone}</td>
                    <td>${resident.email}</td>
                    <td>${resident.moveInDate}</td>
                    <td>${resident.moveOutDate != null ? resident.moveOutDate : '暂无'}</td>
                    <td>${resident.status}</td>
                    <td>
                        <button class="btn btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#residentModal"
                                onclick="prepareEditResident(${resident.id})">编辑
                        </button>
                        <a href="<c:url value='/resident/delete/${resident.id}'/>"
                           class="btn btn-danger btn-sm">删除</a>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>

</div>

<!-- 新增/编辑住户 模态框 -->
<div class="modal fade" id="residentModal" tabindex="-1" aria-labelledby="residentModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form id="residentForm" action="<c:url value='/resident/add'/>" method="post">
                <div class="modal-header">
                    <h5 class="modal-title" id="residentModalLabel">住户信息</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
                </div>
                <div class="modal-body">
                    <!-- 隐藏字段用于标识是新增还是编辑 -->
                    <input type="hidden" id="id" name="id"/>

                    <div class="row mb-3">
                        <div class="col">
                            <label for="name" class="form-label">姓名</label>
                            <input type="text" class="form-control" id="name" name="name" required>
                        </div>
                        <div class="col">
                            <label for="gender" class="form-label">性别</label>
                            <select class="form-select" id="gender" name="gender" required>
                                <option value="">请选择</option>
                                <option value="男">男</option>
                                <option value="女">女</option>
                            </select>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="phone" class="form-label">联系电话</label>
                        <input type="text" class="form-control" id="phone" name="phone">
                    </div>

                    <div class="mb-3">
                        <label for="email" class="form-label">邮箱</label>
                        <input type="email" class="form-control" id="email" name="email">
                    </div>

                    <div class="mb-3">
                        <label for="idCard" class="form-label">身份证号</label>
                        <input type="text" class="form-control" id="idCard" name="idCard">
                    </div>

                    <div class="row mb-3">
                        <div class="col">
                            <label for="moveInDate" class="form-label">入住日期</label>
                            <input type="date" class="form-control" id="moveInDate" name="moveInDate">
                        </div>
                        <div class="col">
                            <label for="moveOutDate" class="form-label">退房日期</label>
                            <input type="date" class="form-control" id="moveOutDate" name="moveOutDate">
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="status" class="form-label">状态</label>
                        <select class="form-select" id="status" name="status" required>
                            <option value="">请选择</option>
                            <option value="在住">在住</option>
                            <option value="退房">退房</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="address" class="form-label">住址</label>
                        <input type="text" class="form-control" id="address" name="address">
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success">保存</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                </div>
            </form>
        </div>
    </div>
</div>


<%@ include file="../common/footer.jsp" %>
<script>
    function prepareAddResident() {
        // 清空表单
        document.getElementById("residentModalLabel").innerText = "新增住户";
        document.getElementById("residentForm").action = "<c:url value='/resident/add'/>";
        document.getElementById("id").value = "";
        document.getElementById("name").value = "";
        document.getElementById("gender").value = "";
        document.getElementById("phone").value = "";
        document.getElementById("email").value = "";
        document.getElementById("idCard").value = "";
        document.getElementById("moveInDate").value = "";
        document.getElementById("moveOutDate").value = "";
        document.getElementById("status").value = "";
        document.getElementById("address").value = "";
    }

    function prepareEditResident(id) {
        fetch("<c:url value='/resident/get/'/>" + id, {
            headers: {
                "Accept": "application/json"
            }
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error("网络错误或服务端返回异常状态码: " + response.status);
                }
                return response.json();
            })
            .then(data => {
                document.getElementById("residentModalLabel").innerText = "编辑住户";
                document.getElementById("residentForm").action = "<c:url value='/resident/update'/>";
                document.getElementById("id").value = data.id;
                document.getElementById("name").value = data.name;
                document.getElementById("gender").value = data.gender;
                document.getElementById("phone").value = data.phone;
                document.getElementById("email").value = data.email;
                document.getElementById("idCard").value = data.idCard;
                document.getElementById("moveInDate").value = data.moveInDate;
                document.getElementById("moveOutDate").value = data.moveOutDate || "";
                document.getElementById("status").value = data.status;
                document.getElementById("address").value = data.address;
            })
            .catch(error => {
                console.error("请求失败:", error);
                alert("获取住户信息失败！");
            });
    }

</script>
